<template>
  <div>
    <div class="form" >
      <div>
        项目名称：<el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        比赛名称：<el-input style="width: 200px;" v-model="keyWord.bsmc" placeholder="请输入比赛名称"></el-input>
      </div>
      比赛级别:<el-select v-model="keyWord.bsJb" placeholder="请选择比赛级别">
        <el-option
            v-for="item in bsjb"
            :key="item.keyvalue"
            :label="item.keyname"
            :value="item.keyvalue">
        </el-option>
      </el-select>
      项目获奖等级：<el-select v-model="keyWord.dj" placeholder="请选择项目获奖等级">
        <el-option
            v-for="item in hjdj"
            :key="item.keyvalue"
            :label="item.keyname"
            :value="item.keyvalue">
        </el-option>
      </el-select>
    </div>
    <div style="margin: 1rem 80rem 1rem 4rem;">
        <el-button type="primary" icon="el-icon-search" @click="showXmHjjl()">搜索</el-button>
    </div>
    <el-table :data="xmhjjlList" border>
      <el-table-column prop="xmMc" label="项目名称" width="300px" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="bsMc" label="比赛名称" width="300px" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="bsJbmc" label="比赛级别" width="140px" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="djmc" label="获奖等级" width="140px" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="status" label="当前状态" width="140px" header-align="center" align="center">
        <template #default="scope">
          <el-tag effect="dark" type="warning" v-if="scope.row.status === '0'">未提交</el-tag>
          <el-tag effect="dark" type="primary" v-if="scope.row.status === '1'">已提交</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.status === '2'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.status === '-1'">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hjzm" label="获奖证明" width="240px" header-align="center" align="center">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="require('../../assets/hjzm/'+scope.row.hjzm)"
              :preview-src-list="[require('../../assets/hjzm/'+scope.row.hjzm)]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '1'" @click="toapprovalHjjl(scope.row.id)" type="primary" size="small" v-permission="'approvalXmhjqk'">核对无误
          </el-button>
          <el-button v-if="scope.row.status === '1'" @click="tocancelXmhjqk(scope.row.id)" type="success" size="small" v-permission="'cancelXmhjqk'">驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog title="驳回项目获奖提交" :visible.sync="cancelVisible" width="30%">
      <el-form :model="cancelXmhjqk">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="cancelXmhjqk.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="比赛名称" label-width="100px">
          <el-input disabled v-model="cancelXmhjqk.bsMc" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="比赛级别" label-width="100px">
          <el-input disabled v-model="cancelXmhjqk.bsJbmc" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="获奖等级" label-width="100px">
          <el-input disabled v-model="cancelXmhjqk.djmc" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="驳回意见" label-width="80px">
          <el-input v-model="cancelXmhjqk.bhly" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelXmhjqkFun()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {queryXmHjjl,cancelXmhjqk} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      cancelVisible:false,
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      keyWord:{},
      bsjb:[],
      hjdj:[],
      size: 0,
      loading: true,
      xmhjjlList: [],
      cancelXmhjqk:{}
    }
  },
  created() {
    this.showXmHjjl()
    this.queryKey("bsjb,hjdj")
  },
  methods: {
    queryKey(keyCodes) {
      axios({
        method: 'GET',
        url: '/keyValue/queryKey?keyCodes=' + keyCodes
      }).then(res => {
        if (res.code == "200") {
          this.bsjb = res.data.bsjb
          this.hjdj = res.data.hjdj
        }
      })
    },
    showXmHjjl() {
      queryXmHjjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmhjjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmHjjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmhjjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmHjjl(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord:this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmhjjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    toapprovalHjjl(id){
      axios({
        method: "POST",
        url: "/xmHjqk/approvalXmhjqk/" + id
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.showXmHjjl()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    tocancelXmhjqk(id){
      axios({
        method: "POST",
        url: "/xmHjqk/getXmhjqkDetail/" + id
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.cancelXmhjqk = res.data
          this.cancelVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    cancelXmhjqkFun(){
      cancelXmhjqk(this.cancelXmhjqk).then(res=>{
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.cancelVisible = false
          this.showXmHjjl()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style>
.form{
  width:90% !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /*right: -5%;*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0 20px 0;
}
.etable{
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

</style>
